<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
</head>
<body>
    <!-- 定义路由请求地址
         1. router-link: 在解析之后形成a标签
         2. to 在解析之后, 形成href属性, 实现页面跳转
      -->
    <div id="app">
        <router-link to="/home">家</router-link>
        <router-link to="/dog">宠物</router-link>
        <router-link to="/zoo">动物园</router-link>
        <!-- 一般需要在当前页面中展现新组件的内容(html)
              提前设定展现位，之后被渲染为一个 div
         -->
        <router-view></router-view>
    </div>

    <!-- 定义home模板   -->
    <template id="homeTem">
        <div>
            <h1>这里是家</h1>
        </div>
    </template>
    <!-- 定义dog模板   -->
    <template id="dogTem">
        <div>
            <h1>狗狗</h1>
        </div>
    </template>
    <!-- 定义lion模板   -->
    <template id="lionTem">
        <div>
            <h1>狮子</h1>
        </div>
    </template>
    <!-- 定义zoo模板   -->
    <template id="zooTem">
        <div>
            <h1>动物园</h1>
            <router-link to="/zoo/dog">狗狗</router-link>
            <router-link to="/zoo/lion">狮子</router-link>
            <!-- 设定路由占位符 -->
            <router-view></router-view>
        </div>
    </template>
    <!-- 导入js, 先导VUE.js, 之后导入路由 -->
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>

    <script>

        // 定义组件变量
        let homeCom = {
            template: "#homeTem"
        }

        let dogCom = {
            template: "#dogTem"
        }

        let zooCom = {
            template: "#zooTem"
        }
        let lionCom = {
            template: "#lionTem"
        }

        // 定义路由对象, 实现请求与路由的绑定
        const router = new VueRouter({
            // routes: 是一个数组的结构,数组中包含对象的结构
            // path: 拦截请求的路径名称
            // component: 组件名称
            routes: [
                {path: "/home", component: homeCom},
                {path: "/dog", component: dogCom},
                {path: "/zoo", component: zooCom,
                children: [
                    {path: "/zoo/dog", component: dogCom},
                    {path: "/zoo/lion", component: lionCom}
                    ]}
            ]
        })

        // 将路由对象与vue实例绑定
        const app = new Vue({
            el: "#app",
            router  // key:value
        })

    </script>
</body>
</html>